<template>
	<div id="app">
		<div class="buttons">
			<button @click="selectImage">选择图片</button>
			<button @click="capture">截取</button>
		</div>
		<div class="container">
			<div class="box">
				<avatar-body ref="component" :config="config" />
			</div>
		</div>
    <img v-show="src" :src="src">
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import avatarBody from '../src/index.vue';
import { Config } from '../src/type';
import { selectImage } from '../src/utils';

export default Vue.extend({
	name: 'App',
	components: { avatarBody },
	data() {
    return {
      src: '',
			config: {
        // limitImageMaxSize: 500,
				// limitImageMinSize: 500
				imageFormat: 'webp',
				// immediateLoading: true
				// cropperLongPressOpaque: false
			} as Config,
		};
	},
	mounted() {
		// this.$refs.component.
	},
	methods: {
		selectImage() {
			selectImage(this.$refs.component).then((f) => {
				console.log(f);

				// this.file = f;
				// this.$refs.component?.inject(f);
			});
		},
		capture() {
			this.$refs.component?.capture().then((data) => {
        console.log(data);

        if(data) this.src = data.base64
			});
		},
	},
});
</script>

<style lang="scss" scoped>
#app {
	width: 100%;
	height: 100%;
	position: relative;
	.container {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.box {
			width: 460px;
			height: 460px;
		}
	}

	.buttons {
		position: fixed;
		left: 10px;
		top: 10px;
		button {
			font-size: 18px;
			padding: 4px 10px;
		}
	}
}
</style>
